<template>
  <div class="api-container">
    <div class="api-header">
      <h2>软件2311</h2>
      <div class="api-title">API接口文档</div>
    </div>
    
    <div class="api-content">
      <!-- 接口概览 -->
      <div class="api-section">
        <h3 class="section-title">接口概览</h3>
        <table class="api-table">
          <thead>
            <tr>
              <th>接口名称</th>
              <th>请求方法</th>
              <th>接口地址</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="api in apiList" :key="api.id">
              <td>{{ api.name }}</td>
              <td>
                <span :class="['method-tag', api.method.toLowerCase()]">
                  {{ api.method }}
                </span>
              </td>
              <td class="api-url">{{ api.url }}</td>
              <td>
                <span :class="['status-tag', api.status]">
                  {{ api.status === 'active' ? '可用' : '维护中' }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 接口详情 -->
      <div class="api-section">
        <h3 class="section-title">接口详情</h3>
        
        <div v-for="detail in apiDetails" :key="detail.id" class="api-detail">
          <h4 class="api-name">
            <span :class="['method-tag', detail.method.toLowerCase()]">
              {{ detail.method }}
            </span>
            {{ detail.name }}
          </h4>
          <div class="api-url-full">{{ detail.url }}</div>
          
          <div class="api-description">
            {{ detail.description }}
          </div>
          
          <!-- 请求参数 -->
          <div class="param-section">
            <h5>请求参数</h5>
            <table class="param-table">
              <thead>
                <tr>
                  <th>参数名</th>
                  <th>类型</th>
                  <th>必填</th>
                  <th>说明</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="param in detail.parameters" :key="param.name">
                  <td>{{ param.name }}</td>
                  <td>
                    <span class="type-tag">{{ param.type }}</span>
                  </td>
                  <td>{{ param.required ? '是' : '否' }}</td>
                  <td>{{ param.description }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 返回示例 -->
          <div class="response-section">
            <h5>返回示例</h5>
            <pre class="response-code"><code>{{ detail.responseExample }}</code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApiDocumentation',
  data() {
    return {
      apiList: [
        { id: 1, name: '用户登录', method: 'POST', url: '/api/v1/auth/login', status: 'active' },
        { id: 2, name: '获取用户信息', method: 'GET', url: '/api/v1/user/info', status: 'active' },
        { id: 3, name: '更新用户资料', method: 'PUT', url: '/api/v1/user/profile', status: 'active' },
        { id: 4, name: '获取用户列表', method: 'GET', url: '/api/v1/users', status: 'maintenance' },
        { id: 5, name: '创建新订单', method: 'POST', url: '/api/v1/orders', status: 'active' }
      ],
      apiDetails: [
        {
          id: 1,
          name: '用户登录',
          method: 'POST',
          url: '/api/v1/auth/login',
          description: '用于用户登录系统，验证用户名和密码后返回访问令牌。',
          parameters: [
            { name: 'username', type: 'string', required: true, description: '用户名' },
            { name: 'password', type: 'string', required: true, description: '密码' },
            { name: 'remember', type: 'boolean', required: false, description: '是否记住登录状态' }
          ],
          responseExample: JSON.stringify({
            code: 200,
            message: '登录成功',
            data: {
              token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
              userInfo: {
                id: 1,
                username: 'admin',
                email: 'admin@example.com'
              }
            }
          }, null, 2)
        },
        {
          id: 2,
          name: '获取用户信息',
          method: 'GET',
          url: '/api/v1/user/info',
          description: '获取当前登录用户的详细信息。',
          parameters: [
            { name: 'userId', type: 'number', required: false, description: '用户ID，不传则获取当前用户信息' }
          ],
          responseExample: JSON.stringify({
            code: 200,
            message: '成功',
            data: {
              id: 1,
              username: 'admin',
              email: 'admin@example.com',
              avatar: 'https://example.com/avatar.jpg',
              createdAt: '2022-01-01T00:00:00Z'
            }
          }, null, 2)
        }
      ]
    }
  }
}
</script>

<style scoped>
.api-container {
  font-family: Arial, sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: white;
}

.api-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.api-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.api-title {
  font-size: 20px;
  color: #666;
  margin-top: 8px;
}

.api-section {
  margin-bottom: 32px;
}

.section-title {
  color: #333;
  border-left: 4px solid #1890ff;
  padding-left: 12px;
  margin: 24px 0 16px 0;
}

/* 表格样式 */
.api-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

.api-table th,
.api-table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #e0e0e0;
}

.api-table th {
  background-color: #fafafa;
  font-weight: bold;
  color: #333;
}

.api-table tr:hover {
  background-color: #f5f5f5;
}

/* 方法标签 */
.method-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.method-tag.get {
  background-color: #61affe;
}

.method-tag.post {
  background-color: #49cc90;
}

.method-tag.put {
  background-color: #fca130;
}

.method-tag.delete {
  background-color: #f93e3e;
}

/* 状态标签 */
.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-tag.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.status-tag.maintenance {
  background-color: #fff2e8;
  color: #fa541c;
  border: 1px solid #ffbb96;
}

/* 接口详情 */
.api-detail {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}

.api-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
  color: #333;
}

.api-url-full {
  color: #666;
  font-family: monospace;
  background: #f5f5f5;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.api-description {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* 参数表格 */
.param-section {
  margin-bottom: 16px;
}

.param-section h5 {
  color: #333;
  margin: 0 0 12px 0;
}

.param-table {
  width: 100%;
  border-collapse: collapse;
}

.param-table th,
.param-table td {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  text-align: left;
}

.param-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.type-tag {
  padding: 2px 6px;
  background: #e6f7ff;
  color: #1890ff;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
}

/* 响应示例 */
.response-section h5 {
  color: #333;
  margin: 0 0 12px 0;
}

.response-code {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
  margin: 0;
}

.response-code code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  color: #333;
  line-height: 1.4;
}
</style>